<template>
  <poputLayout
    @closeWindow="closeWindow"
    :title="title1"
    @search="search"
    :isYear="true"
    :isMonth="true"
    :isDept="true"
    :isProject="true"
  >
    <div class="body-conatiner">
      <div class="list">
        <div class="progress-section" :style="{ height: height }">
          <div class="progress-list-form">
            <div class="title"></div>
            <div class="right">
              <div class="right-list" v-for="(item,index) in titleList" :key="index">{{ item }}</div>
            </div>
          </div>
          <div class="progress-list-form" v-for="(item,index) in listData" :key="index">
            <div class="title">{{ item.deptName }}</div>
            <div class="banner">
              <div
                class="banner-list banner-list-1"
                :data-border="item.infos.type1 === 2"
                :data-next="item.infos.type2 !== 3"
                :data-background="item.infos.type1 === 3"
              ></div>
              <div
                class="banner-list"
                :data-border="item.infos.type2 === 2"
                :data-next="item.infos.type3 !== 3"
                :data-background="item.infos.type2 === 3"
              ></div>
              <div
                class="banner-list"
                :data-border="item.infos.type3 === 2"
                :data-next="item.infos.type4 !== 3"
                :data-background="item.infos.type3 === 3"
              ></div>
              <div
                class="banner-list"
                :data-border="item.infos.type4 === 2"
                :data-next="item.infos.type5 !== 3"
                :data-background="item.infos.type4 === 3"
              ></div>
              <div
                class="banner-list"
                :data-border="item.infos.type5 === 2"
                :data-background="item.infos.type5 === 3"
              ></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </poputLayout>
</template>

<script>
import poputLayout from "../../popup-layout";
import request from "@/utils/request";
import Qs from "qs";
export default {
  components: {
    poputLayout,
  },
  data() {
    return {
      form: {},
      height: null,
      titleList: ["申请", "外证", "交税", "开票", "抵扣"],
      listData: [],
      title1: "8月业务进度",
    };
  },
  mounted() {},
  methods: {
    search(val) {
      this.form = val;
      this.screenSpeedList();
      this.title1=`${this.form.month}月业务进度`
    },
    screenSpeedList() {
      request({
        url: "/system/screen/speedList",
        method: "post",
        headers: { "content-type": "application/x-www-form-urlencoded" },
        data: Qs.stringify({
          deptId: this.form.deptId,
          year: this.form.year,
          //   month: 1,
          month: this.form.month,
          projectId: this.form.projectId,
        }),
      }).then((res) => {
        const data = [];
        if (res && res.data && res.data.length > 0) {
          // 1灰色圆圈 2激活色圆圈 3有背景色条纹
          // ["申请 type1", "外证 type2", "交税 type3", "开票 type4", "抵扣 type5"]
          res.data.forEach((item) => {
            const deptName = item.deptName;
            const infos = {
              type1: 1,
              type2: 1,
              type3: 1,
              type4: 1,
              type5: 1,
            };
            if (item.infos && item.infos.length > 0) {
              item.infos.forEach((el) => {
                if (el.speedName === "申请") {
                  if (el.speedAgreeDate) {
                    infos.type1 = 2;
                  }
                  if (el.speedAgreeDate && el.speedSubmitDate) {
                    infos.type1 = 3;
                  }
                } else if (el.speedName === "外证") {
                  if (el.speedAgreeDate) {
                    infos.type2 = 2;
                  }
                  if (el.speedAgreeDate && el.speedSubmitDate) {
                    infos.type2 = 3;
                  }
                } else if (el.speedName === "交税") {
                  if (el.speedAgreeDate) {
                    infos.type3 = 2;
                  }
                  if (el.speedAgreeDate && el.speedSubmitDate) {
                    infos.type3 = 3;
                  }
                } else if (el.speedName === "开票") {
                  if (el.speedAgreeDate) {
                    infos.type4 = 2;
                  }
                  if (el.speedAgreeDate && el.speedSubmitDate) {
                    infos.type4 = 3;
                  }
                } else if (el.speedName === "抵扣") {
                  if (el.speedAgreeDate) {
                    infos.type5 = 2;
                  }
                  if (el.speedAgreeDate && el.speedSubmitDate) {
                    infos.type5 = 3;
                  }
                }
              });
            }
            data.push({
              deptName,
              infos,
            });
          });
        }
        console.log(data);
        // this.$refs.progress.open(data)
        this.listData = data;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/views/report_form_dark/styles/fn.scss";

.body-conatiner {
  width: vw(1136);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: space-around;

  .list {
    width: vw(1100);
    height: vh(289);
    background: #002463;
    border-radius: vw(4);
    margin: vh(40) 0;
    padding: 0 vw(20);

    .progress-section {
      height: 100%;
      width: 100%;
      overflow: auto;
      padding: vw(6) 0;
      //   border: 1px solid red;

      .title {
        width: 20%;
        font-size: vw(14);
        font-family: Microsoft YaHei UI;
        font-weight: 400;
        color: rgba(143, 199, 255, 0.64);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        &:hover {
          color: rgba(143, 199, 255, 1);
        }
      }

      .progress-list-form {
        width: 100%;
        height: 34px;
        line-height: 34px;
        display: flex;
        flex-direction: row;
        align-items: center;

        .right {
          flex-grow: 1;
          flex-shrink: 1;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          padding-left: vw(14);

          &-list {
            font-size: vw(14);
            font-family: Microsoft YaHei UI;
            font-weight: 400;
            color: rgba(143, 199, 255, 0.48);
          }
        }

        .banner {
          flex-grow: 1;
          display: flex;
          flex-direction: row;
          border-radius: vw(8);
          overflow: hidden;

          &-list {
            flex-grow: 1;
            width: 20%;
            height: vw(10);
            background: rgba(143, 199, 255, 0.2);
            // border-radius: 0 vw(8) vw(8) 0;
            position: relative;

            &::after {
              content: "";
              display: block;
              position: absolute;
              right: 0;
              top: vw(-0);
              width: vw(10);
              height: vw(10);

              background: rgba(255, 255, 255, 0.4);

              border: vw(2) solid #1890ff;
              border-radius: vw(10);
            }
          }

          .banner-list-1 {
            width: vw(26);
            height: vw(10);
            background: rgba(255, 255, 255, 0.4);
            // border-radius: vw(8);

            &::after {
              content: "";
              display: block;
              position: absolute;
              right: 0;
              top: vw(-0);
              width: vw(10);
              height: vw(10);
              background: rgba(255, 255, 255, 0.4);
              border: vw(2) solid #1890ff;
              border-radius: vw(10);
            }
          }

          [data-border="true"] {
            &.banner-list,
            &.banner-list-1 {
              &::after {
                content: "";
                border-color: #1fc557;
              }
            }
          }

          [data-background="true"] {
            &.banner-list,
            &.banner-list-1 {
              background: #1890ff;
              &::after {
                content: "";

                border-color: #1890ff;
              }
            }
          }

          [data-next="true"] {
            &.banner-list,
            &.banner-list-1 {
              border-radius: 0 vw(8) vw(8) 0;
            }
          }
        }
      }
    }
  }
}
</style>